<template>
	<view class="container">
		<view class="topline">
		</view>
		<view class="warp u-m-t-20">		
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="项目名称" prop="name">
					<u-input
						type="input"
						v-model="model.name"
						placeholder="请输入项目名称"
						input-align="right"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30" :label-width="200" :label-position="labelPosition" label="项目性质" prop="type">
					<view class=" u-flex u-row-right" style="width:100%">
					<u-radio-group v-model="model.type" @change="radioGroupChange" :activeColor="activeColor">
						<u-radio @change="radioChange" v-for="(item, index) in types" 
							:key="index" :name="item.name"
							:shape="shape" :disabled="item.disabled"
						>{{item.name}}</u-radio>
					</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="资质要求" prop="requires">
					
					<view style="width:100%;text-align: right;" @click="mSelect">{{model.requires || "请选择"}}</view>
					<TriTree ref="triTree" :range="fetchDict.qualification_merge" @confirm="function (e){return setChooseType(e,'requires')}"></TriTree>
				
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="项目地点" prop="place">
					<view style="width:100%;text-align: right;" @click="cityActive = true">{{model.place || "请选择"}}</view>
					<!-- <u-input type="select" :select-open="selectShowCity" v-model="model.place" placeholder="请选择" placeholderStyle="color: #0D1D36;"
					 input-align="right" @click="selectShowCity = true"></u-input> -->
				</u-form-item>
				
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="项目规模" prop="scale">
					<u-input
						type="select"
						:select-open="selectShowScale"
						v-model="model.scale"
						placeholder="请选择"
						input-align="right"
						@click="selectShowScale = true"
					></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="委托方" prop="wtf">
					<u-input
						type="input"
						v-model="model.wtf"
						placeholder="请输入委托方"
						input-align="right"
					></u-input>
				</u-form-item>
				
				<!-- <u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="承接方" prop="cjf">
					<u-input
						type="input"
						v-model="model.cjf"
						placeholder="请输入承接方"
						input-align="right"
					></u-input>
				</u-form-item> -->
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="项目周期" prop="resultDate">
						<!-- <view @click="show = true">{{startDate}}<view> -->
						
						<u-input
							type="input"
							v-model="resultDate"
							placeholder="请选择日期"
							input-align="right"
							 @click="show = true"
						></u-input>
						<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode" :start-text="startText" :end-text="endText"
						 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
						</u-calendar>
				</u-form-item>
				
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="开拓佣金" prop="ktyj">
					<u-input
						type="input"
						v-model="model.ktyj"
						placeholder="请输入佣金比例"
						input-align="right"
					></u-input>
					%
				</u-form-item>
				
				<u-form-item class="u-m-l-30" :label-width="200" :label-position="labelPosition" :border-bottom="false" label="小红帽" prop="type">
					<view class=" u-flex u-row-right" style="width:100%">
					<u-radio-group v-model="model.isXhm" @change="radioGroupXhChange" :activeColor="activeColor">
						<u-radio @change="radioChange" v-for="(item, index) in xhms" 
							:key="index" :name="item.name"
							:shape="shape" :disabled="item.disabled"
						>{{item.name}}</u-radio>
					</u-radio-group>
					</view>
				</u-form-item>
				
				<u-form-item  class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="" prop="xmbs">
					<view style="color: #9da2b0;line-height:40rpx;">小红帽表示此项目为智汇方舟伙伴开拓并单独设定佣金比例，详见帮助相关规则说明</view>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="概况说明" prop="remark">
					<u-input
						type="input"
						v-model="model.remark"
						placeholder="请输入概况说明"
						input-align="right"
					></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="warp u-m-t-20 u-p-30">
			<view class="agreement zcxy">
				<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
				<view class="agreement-text">
					<text class="tybyd">我已阅读并同意</text>
					<text class="fwxy" @click="toAgreement('7')">《发布项目规则》</text>
				</view>
			</view>
			<u-button class="button" @click="submit">提交</u-button>
			<!--弹出框-->
			<u-select mode="single-column" :list="requiresList" v-model="selectShowRequires" @confirm="selectRequires"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowCity" mode="mutil-column-auto" value-name="value" label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<u-select mode="single-column" :list="scaleList" v-model="selectShowScale" @confirm="selectScale"></u-select>
			
			<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
import TriTree from '@/components/tki-tree/tki-tree.vue'
	import citySelect from '@/components/u-city-select.vue'
export default {
	components: {
		citySelect,
		TriTree
	},
	data() {
		let that = this;
		return {
				cityActive: false,
			fetchDict:[],
			defaultValue: [3],
			listCitys:[],
			/**
			 * form验证
			 * */
			 resultDate:'',
			check:false,
			result: '',
			shape: 'circle', 
			value: '委托',
			activeColor: '#2979ff',			
			show: false,
			mode: 'range',
			startDate: "",	
			startText: '开始',
			endText: '结束',
			rangeColor: '#2979ff',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#2979ff',
			btnType: 'primary',
			model: {
				"commission": 0,
				"endDate": "",
				"isXhm": '是',
				"name": "",
				"place": "",
				"remark": "",
				"requires": "",
				"scale": "",
				"startDate": "",
				"type": "委托",
				"wtf": "",
				"cjf":""
			},
			requiresList: [
				{
					value: '1',
					label: '规划设计甲级'
				},
				{
					value: '2',
					label: '工程勘测'
				}
			],
			scaleList: [
				{
					value: '1',
					label: '大型'
				},
				{
					value: '2',
					label: '中型'
				}
			],
			cityList: [],
			types: [
				{
					name: '委托',
					value: true,
					checked: true,
					disabled: false
				},
				{
					name: '招标',
					value: false,
					checked: false,
					disabled: false
				}
			],
			xhms: [
				{
					name: '是',
					value: true,
					checked: true,
					disabled: false
				},
				{
					name: '否',
					value: false,
					checked: false,
					disabled: false
				}
			],
			rules: {
				name: [
					{
						required: true,
						message: '请输入项目名称',
						trigger: ['change','blur']
					}
				],
				requires: [
					{
						required: true,
						message: '请选择资质要求',
						trigger: ['change','blur']
					}
				],
				place: [
					{
						required: true,
						message: '请选择项目地点',
						trigger: 'change'
					}
				],
				scale: [
					{
						required: true,
						message: '请选择项目规模',
						trigger: ['change','blur']
					}
				],
				wtf: [
					{
						required: true,
						message: '请输入委托方',
						trigger: ['change','blur']
					}
				],
				cjf: [
					{
						required: true,
						message: '请输入承接方',
						trigger: ['change','blur']
					}
				],
				commission: [
					{
						required: true,
						message: '请输入开拓佣金',
						trigger: ['change','blur']
					}
				]
			},
			required: true,
			border: false,
			selectStatus: 'close',
			selectShowRequires: false,
			selectShowCity:false,
			selectShowScale:false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['toast'],
		};
	},
	computed: {
		showBtnStatus() {
			return this.show ? 0 : 1;
		}
	},
	onNavigationBarButtonTap(obj) {
		uni.navigateTo({
			url:'../throughTrain/project'
		})
	},
	mounted() {},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options){
		if(options.data){
			let result = JSON.parse(decodeURIComponent(options.data));
			this.model = {
				"id":result.id,
				"commission": result.commission,
				"endDate": result.endDate,
				"isXhm": result.isXhm,
				"name": result.name,
				"place": result.place,
				"remark": result.remark,
				"requires": result.requires,
				"scale":result.scale,
				"startDate":result.startDate,
				"type": result.type,
				"wtf":result.wtf,
				"cjf":result.cjf
			};
			if(this.model.type == 'wt'){
				this.model.type = "委托";
			}else{
				this.model.type = "招标";
			}
			if(this.model.isXhm == 'true'){
				this.model.isXhm = "是";
			}else{
				this.model.isXhm = "否";
			}
			this.resultDate = this.model.startDate + "-" + this.model.endDate;
		}
		this.getcityList();
		
		var keys = {'keys':['qualification_merge']}
		this.dictionaryFetchDict(keys);
	},
	methods: {		
		toAgreement(type){
			uni.navigateTo({
				url: '/pages/login/agreement?type='+type
			});
		},
		cityChange(e) {
			let address = e.province.label
			if(e.city){
				address = address + '-' + e.city.label;
			}
			if(e.area){
				address = address + '-' + e.area.label;
			}
			this.model.place = address
		},
		setChooseType(item, type) {
			var column_array = this.$mUtils.array_column(item, 'label');
			var modelValue = column_array.join(',');
			this.model[type] = modelValue;
			this.$forceUpdate()
		},
		async dictionaryFetchDict(keyWords){
			let result = await this.$apis.fetchMultipleKey(keyWords);
			this.fetchDict = result.data;
		},
		mSelect() {
			this.$refs.triTree._show()
		},
		confirmCity(e) {
			this.model.place = '';
			e.map((val, index) => {
				this.model.place += this.model.place == '' ? val.label : '-' + val.label;
			})
		},	
		async getcityList(){
			let result = await this.$apis.fetchArea({level:2});	
			this.listCitys = result.data;
		},
		async getScaleList(){
			let result = await this.$apis.findMatchingDictionary({pid:1});
			//this.scaleList = result.data;
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					if(!this.model.startDate) return this.$u.toast('请选择项目周期');
					if(!this.check) return this.$u.toast('请勾选协议');
					this.save();
				} else {
				}
			});
		},
		async save(){			
			this.model.isXhm = this.model.isXhm =='是'?true:false;
			this.model.type = this.model.type =='委托'?'wt':'zb';
			let result = await this.$apis.addProjectRegister(this.model);
			if(result.code == 200){
				this.$u.toast('项目已登记');
				setTimeout(function(){
					uni.navigateTo({
						url:'../throughTrain/project'
					})	
				},1000);
			}
		},
		radioChange(){
			
		},
		// radio选择发生变化
		radioGroupChange(e) {
			this.model.type = e;
		},
		// radio选择发生变化
		radioGroupXhChange(e) {
			this.model.isXhm = e;
		},
		change(e) {			
			this.model.startDate = e.startDate;
			this.model.endDate = e.endDate;	
			this.resultDate = e.startDate +"-"+ e.endDate;
		},
		selectKey(e){
			this.keywords[e].selected = !this.keywords[e].selected;
		},
		// 选择
		selectRequires(e) {
			this.model.requires = '';
			e.map((val, index) => {
				this.model.requires += this.model.requires == '' ? val.label : '-' + val.label;
			});
		},	
		selectCity(e) {
			this.model.place = '';
			e.map((val, index) => {
				this.model.place += this.model.place == '' ? val.label : '-' + val.label;
			});
		},	
		selectScale(e) {
			this.model.scale = '';
			e.map((val, index) => {
				this.model.scale += this.model.scale == '' ? val.label : '-' + val.label;
			});
		},	
		// 勾选版权协议
		checkboxChange(e) {
			this.check = e.value;
		}
		
	}
};
</script>
<style scoped lang="scss">
page {
	background: #fff;
}
.topline {
		width: 100%;
		height: 20rpx;
		background: #F5F5F9;
	}
.warp {
	background: #fff;
}
.count {
	.count-to {
		font-size: 24rpx;
	}
	text {
		padding: 2rpx 12rpx;
		background: #ff9e21;
		color: #ffffff;
		font-size: 24rpx;
	}
}
.group {
	padding: 6rpx 21rpx;
	background: #f1f7ff;
	border-radius: 6rpx;
	margin: 30rpx 30rpx 0 30rpx;
}
.button {
	width: 662rpx;
	margin:20rpx auto 30rpx auto;
	background: #ab61ff;
	border-radius: 40rpx;
	border: 0;
	color: #fff;
	
font-size: 32rpx;
	&.u-hairline-border:after {
		border: 0;
	}
}
.word {
	font-size: 36rpx;
	color: #0d1d36;
	font-weight: bold;
}
.keywords {
	display: flex;
	flex-flow: wrap;
	view {
		margin:0 20rpx 20rpx 0;
		padding: 8rpx 21rpx;
		background: #f6f6f6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			display: block;
			width: 16rpx;
			height: 16rpx;
			margin-left:19rpx;
			border: 4rpx solid #BDBDBD;
			border-radius: 8rpx;

		}
		&.selected {
			color:#4B9CFF;
			text {border-color:#4B9CFF;background-color: #4B9CFF;}
		}
	}
}
.zcxy{
		display: flex;
		justify-content: center;
		// flex-wrap: nowrap;
		align-items: center;
		padding: 20rpx 0 40rpx 0;
		image{
			margin-left: 165rpx;
			width: 48rpx;
			height: 48rpx;
		}
		.tybyd{
			font-size: 24rpx;
			color: #9DA2B0;
					
		}
		.fwxy{
			font-size: 24rpx;
			color: #FF9E21;
		}
		
	}
</style>
